<template>
  <div class="comment-item">
    <router-link class="to_img" :to="`/user/${data.userId}`" target="_blank">
      <img :style="{
        'width': replyLevel === 1?'50px':'30px',
        'height': replyLevel === 1?'50px':'30px',
        'border-radius': '50%'
      }" :src="ImgURL+'/img/tximg/'+data.avatar" v-if="data.avatar" alt="加载中">
      <img :style="{
        'width': replyLevel === 1?'40px':'30px',
        'height': replyLevel === 1?'40px':'30px',
        'border-radius': '50%'
      }" src="@/assets/images/user.png" v-else alt="加载中">
    </router-link>
    <div class="comment-content-panel">
      <div class="nick-name-pamel">
        <router-link class="nick-name" :to="`/user/${data.userId}`">
          {{data.nickName}}
        </router-link>
        <template v-if="data.replyUserId">
          <span class="reply-title">回复</span>
          <router-link class="reply-nick-name" :to="`/user/${data.replyUserId}`">
            @{{data.replyNickName}}
          </router-link>
        </template>
      </div>
      <div class="comment-message">
        <Tag v-if="data.topType === 3"></Tag>
        <span v-html="proxy.Utils.escapeHtml(data.content||'')"></span>
      </div>
      <div class="image-show" v-if="data.imgPath">
<!--        使用v-viewer插件,配置不显示文件名-->
        <div v-viewer :options="viewerOptions">
          <img id="logImg" style="width: 160px;height: 90px;border-radius: 5px" :src="ImgURL+'/img/'+data.imgPath" alt="">
        </div>
      </div>
      <div class="comment-op">
        <div class="op-left">
          <div class="comment-time">
            {{data.postTime}}
          </div>
          <div :class="[
              'iconfont icon-good',
              data.likeCountActive ? 'active' : '']"
          @click="doLike(data)">
            {{data.likeCount === 0 ? '' : data.likeCount }}
          </div>
          <div :class="[
              'iconfont icon-no-good',
              data.hateCountActive ? 'active' : '']"
               @click="doHate(data)">
            {{data.hateCount === 0 ? '' : data.hateCount }}
          </div>
          <div class="reply-btn" @click="shwoReplyHandler(data,replyLevel)">
            回复
          </div>
        </div>
        <el-dropdown>
          <span class="op-right iconfont icon-more"></span>
          <template #dropdown>
            <el-dropdown-item
            @click="topComment"
            v-if="videoInfo.userId === loginStore.uid &&
            data.pcommentId === 0"
            >
              {{data.topType === 3 ? '取消置顶' : '置顶评论'}}
            </el-dropdown-item>
            <el-dropdown-item
              @click="delComment"
              v-if="videoInfo.userId === loginStore.uid ||
              data.userId === loginStore.uid"
            >
              删除
            </el-dropdown-item>
            <el-dropdown-item>
              举报
            </el-dropdown-item>
          </template>
        </el-dropdown>
      </div>
      <div class="reply-list">
        <VideoCommentItem
          v-for="(item,index) in data.children"
          :data="item"
          :replyLevel="2">
        </VideoCommentItem>
      </div>
      <VideoCommentSend
        v-if="replyLevel === 1 && data.showReply"
        :sendType="1"></VideoCommentSend>
    </div>
  </div>
</template>
<script setup>
import VideoCommentSend from "@/views/videoDetail/VideoCommentSend.vue";
import VideoCommentItem from "./VideoCommentItem.vue";
import {getCurrentInstance, inject, nextTick, onMounted, provide, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useLoginStore} from "@/stores/loginStore.js"
import {ImgURL} from "@/utils/Request.js";
import Tag from "@/components/Tag.vue";
import {mitter} from "@/eventbus/eventBus.js";
import {ElMessage} from "element-plus";
import {CancelTopComment, DeleteComment, TopComment} from "@/api/video.js";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const loginStore = useLoginStore();
const props = defineProps({
  data: {
    type: Object,
    default: {}
  },
  replyLevel: {
    type: Number,
    default: 1
  }
})
const videoInfo = inject('videoInfo')
const showReply = inject('showReply')
const viewerOptions = {
  title: false,
  zIndex: 9999,
};

const doLike = (data) => {

}
const doHate = (data) => {

}
const shwoReplyHandler = (item,replyLevel) => {
  showReply(replyLevel === 1?item.commentId : item.pcommentId)
  nextTick(() => {
    const commentData = {
      replyCommentId: item.commentId,
      nickName: item.nickName,
      replyUserId: item.userId,
    }
    mitter.emit('initCommentData',commentData)
  })
}
const topComment = async () => {
  proxy.Confirm({message:`您确定要${props.data.topType === 3 ? '取消置顶' : '置顶'}评论吗?`,okfun:async()=>{
      const res = props.data.topType === 3? await CancelTopComment(props.data.commentId,props.data.pcommentId): await TopComment(props.data.commentId)
      if(res.code === 200){
        ElMessage.success(props.data.topType === 3?'取消置顶成功':'置顶成功')
      }else{
        ElMessage.error(props.data.topType === 3?'取消置顶失败':'置顶失败')
      }
      mitter.emit('toComments', 1);
  }})

}
const delComment = () => {
  proxy.Confirm({message:`您确定要删除评论吗?`,okfun:async()=>{
    const res = await DeleteComment(props.data.commentId,props.data.pcommentId)
      if(res.code === 200){
        ElMessage.success('删除成功')
      }else{
        ElMessage.error('删除失败')
      }
      mitter.emit('toComments', 1);
  }})
}
</script>
<style scoped lang="scss">
.comment-item {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  .comment-content-panel{
    flex: 1;
    margin-left: 15px;
    margin-top: 5px;
    .nick-name-pamel{
      font-size: 14px;
      display: flex;
      align-items: center;
      vertical-align: middle;
      .nick-name{
        text-decoration: none;
        color: #61666d;
      }
      .reply-title{
        margin: 0 3px;
      }
      .reply-nick-name{
        text-decoration: none;
        color: #409EFF;
      }
    }
    .comment-message{
      font-size: 14px;
      line-height: 20px;
      margin-top: 5px;
    }
    .image-show{
      margin-top: 10px;
      width: 100px;
      height: 100px;
    }
    .comment-op{
      margin-top: 10px;
      display: flex;
      color: #61666d;
      align-items: center;
      font-size: 13px;
      justify-content: space-between;
      .op-left{
        display: flex;
        .comment-time{
          margin-right: 20px;
        }
        .iconfont{
          font-size: 13px;
          margin-right: 20px;
          cursor: pointer;
          &::before{
            font-size: 15px;
            margin-right: 5px;
          }
        }
        .active{
          &::before{
            color: #409EFF;
          }
        }
        .reply-btn{
          cursor: pointer;
        }
        .op-right{
          cursor: pointer;
          margin-right: 5px;
        }
      }
    }
  }
  .reply-list{
    .comment-item{
      border-bottom: none;
    }
    .comment-content-panel{
      .nick-name-pamel{
        float: left;
        margin-right: 5px;
      }
      .comment-message{
        margin-top: 0;
      }
    }
  }
  #logImg:hover{
    //鼠标变成放大镜
    cursor: pointer;
  }
}
</style>